<template>
	<view class="ifun-select-node">
		<view class="select-item"
			:class="[isActive(item)?'active':'',item[treeOption.children]?'has-sub':'']"
			v-for="item in data" :key="item[treeOption.value]">
			<view class="select-item-node">
				<text class="node-label" @click="()=>handleSelect(item)">{{item[treeOption.label]}}</text>
				<image class="icon-down" src="../../static/down.png" @click="()=>handleExpandNode(item)"
					v-if="item[treeOption.children] && item[treeOption.children].length>0" :class="expandIds.includes(item[treeOption.value])?'expand':''" />
			</view>

			<view class="select-sub-data"
				v-if="item[treeOption.children] && expandIds.includes(item[treeOption.value])">
				<select-node :multiple="multiple" :checkStrictly="checkStrictly" :data="item[treeOption.children]" @click="handleSelect"
					:selected="selected" :options="treeOption" />
			</view>
		</view>
	</view>
</template>

<script>
	import SelectNode from './select-node.vue'
	
	export default {
		name: "select-node",
		
		components: {
			SelectNode
		},
		props: {
			multiple:Boolean,
			selected: {
				type:[Object,Array],
				default:()=>({})
			},
			data: {
				type: Array,
				default: []
			},
			options: {
				type: Object,
				default: () => ({
					value: 'value',
					label: 'label',
					children: 'children'
				})
			},
			checkStrictly: Boolean,
		},
		computed: {
			treeOption() {
				return {
					value: 'value',
					label: 'label',
					children: 'children',
					...this.options,
				}
			},
			
		},
		data() {
			return {
				// selected: {},
				expandIds: [],
			}
		},
		methods: {
			isActive(node){
				const {value} = this.treeOption;
				if(this.multiple){
					return this.selected.includes(node[value])
				}
				return this.selected[value] == node[value]
			},
			handleExpandNode(info) {
				let index = this.expandIds.findIndex(val => val == info[this.treeOption.value])
				if (index > -1) {
					this.expandIds.splice(index, 1)
				} else {
					this.expandIds.push(info[this.treeOption.value])
				}
			},
			handleSelect(info) {
				if (!this.checkStrictly && info[this.treeOption.children] && info[this.treeOption.children].length > 0) {
					return
				}
				// this.selected = info;
				this.$emit('click', info)
			},
		}
	}
</script>

<style lang="less" scoped>
	.ifun-select-node {
		.select-item {

			&.active {
				&>.select-item-node {
					
					color: #4965D4;
					background: rgba(73, 101, 212, 0.1);
					border-radius: 4px 4px 4px 4px;
				}

			}

			.select-item-node {
				line-height: 22px;
				padding: 8px;
				height: 20px;
				color: #000;
				font-size: 16px;
				display: flex;
				justify-content: space-between;
				
				.node-label{
					flex:1;
				}
				.icon-down {
					transition: 300ms;
					flex: 0 0 20px;
					height: 20px;

					&.expand {
						transform: rotate(180deg);
					}
				}
			}

			.select-sub-data {
				margin-left: 20px;
			}
		}
	}
</style>